<template>
  <div class="container">
    <div class="header" :class="{ active: isActive }">
      <Header></Header>
    </div>
    <div class="body">
      <h1>🏖️茶余饭后,聊聊天!</h1>
      <p>手执烟火以谋生,心怀诗意至远方!</p>
    </div>
    <div class="body-container">
      <div class="content">
        <div class="content_left">
          <div class="item" v-for="(item) in articles" :key="item.article_id">
            <div class="post">
              <div class="user-info">
                <div class="img">
                  <img style="width: 50px;height: auto" alt=""
                    src="https://cdn.xuxiao888.com/picture9b32a4b6a19682232616c1e5a981fe2.jpg?e=1713411370&token=3xDQvuj_5fwOatHR5JutJUXOt5jofKFzDEnM6fCH:LXnSDfeXctQ6-pWc6LjXZnyb-ck=">
                </div>
                <div
                  style="display: flex;flex-direction: column;justify-content: space-around;align-items: flex-start;margin-left: 10px">
                  <span class="username">xuxiao</span>
                  <span class="date">{{ formatPast(item.article_published_at) }}</span>
                </div>
              </div>
              <div class="content1">
                <p class="p">
                  {{ item.article_content }}</p>
                <!--                <img v-if="item.article_image_url" :src="item.article_image_url" width="500px" height="auto"-->
                <!--                     class="panda-img" alt=""/>-->
                <el-image v-if="item.article_image_url && judge(item.article_image_url)" class="img"
                  :src="item.article_image_url" hide-on-click-modal lazy :zoom-rate="1.2" :max-scale="7"
                  :min-scale="0.2" :preview-src-list="showImg(item.article_image_url)" fit="fill" />
                <video v-else-if="item.article_image_url" width="500px" style="margin-left: 30px"
                  :src="item.article_image_url" muted controls></video>
              </div>
              <div class="content1_bottom">
                <div class="ip">{{ item.article_ip_address }}</div>
                <div class="right">
                  <div class="like">
                    <SvgIcon name="dianzan" width="20px" height="20px"></SvgIcon>
                    <span class="num">{{ item.article_likes }}</span>
                  </div>
                  <div class="aa" @click="comment(item)">
                    <SvgIcon name="pinglun" width="20px" height="20px"></SvgIcon>
                  </div>
                </div>
              </div>
              <div class="user_comment" :class="'comment-' + item.article_id">
                <div class="inner-row">
                  <el-input type="textarea" v-model="user.content" :rows="2"
                    style="width: 70%;margin-right: 20px"></el-input>
                  <el-button type="success" size="large" @click="sendComment(item)">发送</el-button>
                </div>
                <div class="inner-row-con">
                  <el-input placeholder="称呼" v-model="user.username" style="width: 30%" prefix-icon="user"></el-input>
                  <el-input placeholder="邮箱" v-model="user.email" style="width: 30%" prefix-icon="message"></el-input>
                </div>
              </div>
            </div>
            <div class="comments">
              <ul>
                <li v-for="comment in item.comments" :key="comment.comment_id">
                  <div class="comments_item" @click="comment1(comment)">
                    <div>
                      <span class="user">{{ comment.comment_author_username }}:</span>
                      <span class="con">{{ comment.comment_content }}</span>
                    </div>
                    <div class="right">
                      <div class="like">
                        <SvgIcon name="dianzan" width="20px" height="20px"></SvgIcon>
                        <span class="num">{{ comment.comment_likes }}</span>
                      </div>
                      <div class="aa" @click="handleComment(comment, comment.comment_id)">
                        <SvgIcon name="pinglun" width="20px" height="20px"></SvgIcon>
                      </div>
                    </div>
                  </div>
                  <div class="user_comment" :class="'comment-' + comment.comment_id">
                    <div class="inner-row">
                      <el-input type="textarea" v-model="user.content" :rows="2"
                        style="width: 70%;margin-right: 20px"></el-input>
                      <el-button type="success" size="large" @click="sendComment(item, comment, true)">发送</el-button>
                    </div>
                    <div class="inner-row-con">
                      <el-input placeholder="称呼" v-model="user.username" style="width: 30%"
                        prefix-icon="user"></el-input>
                      <el-input placeholder="邮箱" v-model="user.email" style="width: 30%"
                        prefix-icon="message"></el-input>
                    </div>
                  </div>
                  <div v-if="comment.children && comment.children.length">
                    <ul>
                      <li v-for="child in comment.children" :key="child.comment_id">
                        <div class="comments_item" @click="comment1(child)">
                          <div>
                            <span class="user">
                              {{ child.comment_author_username }} 回复 {{ comment.comment_author_username }}:</span>
                            <span class="con">{{ child.comment_content }}</span>
                          </div>
                          <div class="right">
                            <div class="like">
                              <SvgIcon name="dianzan" width="20px" height="20px"></SvgIcon>
                              <p class="num">{{ comment.comment_likes }}</p>
                            </div>
                            <div class="aa">
                              <SvgIcon name="pinglun" width="20px" height="20px"></SvgIcon>
                            </div>
                          </div>
                        </div>
                        <div class="user_comment" :class="'comment-' + child.comment_id">
                          <div class="inner-row">
                            <el-input type="textarea" v-model="user.content" :rows="2"
                              style="width: 70%;margin-right: 20px"></el-input>
                            <el-button type="success" size="large" @click="sendComment(item, child, true)">发送
                            </el-button>
                          </div>
                          <div class="inner-row-con">
                            <el-input placeholder="称呼" v-model="user.username" style="width: 30%"
                              prefix-icon="user"></el-input>
                            <el-input placeholder="邮箱" v-model="user.email" style="width: 30%"
                              prefix-icon="message"></el-input>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
        <div class="content_right">
          <div class="bg"></div>
          <div class="head">
            <img style="width: 100%;height: auto" alt=""
              src="https://cdn.xuxiao888.com/picture9b32a4b6a19682232616c1e5a981fe2.jpg?e=1713411370&token=3xDQvuj_5fwOatHR5JutJUXOt5jofKFzDEnM6fCH:LXnSDfeXctQ6-pWc6LjXZnyb-ck=">
          </div>
          <div class="name">
            xuxiao
          </div>
          <div class="personality">
            手执烟火以谋生,心怀诗意至远方!
          </div>
          <el-divider></el-divider>
          <div class="concat">
            <SvgIcon class="svg" name="mail" width="20px" height="20px"></SvgIcon>
            <SvgIcon class="svg" name="gitee-fill-round" width="20px" height="20px"></SvgIcon>
            <SvgIcon class="svg" name="QQ" width="20px" height="20px"></SvgIcon>
            <SvgIcon class="svg" name="wechat-fill" width="20px" height="20px"></SvgIcon>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <Bottom></Bottom>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, onUnmounted, reactive } from "vue";
import Header from "@/layout/index.vue";
import SvgIcon from "@/components/SvgIcon/SvgIcon.vue";
import Bottom from "@/components/Bottom/index.vue";
import { GetAllArticleSync } from "@/api/article";
import { ElMessage } from "element-plus";
import { addOrUpdateUser } from "@/api/user";
import { addComments } from "@/api/comment";
import { formatPast } from "@/utils/formatPast.ts";
import { useAnimatedUserinfo } from "@/hooks/useAnimatedUserinfo.ts";

onMounted(async () => {
  window.addEventListener("scroll", handleScroll)
  // window.addEventListener('scroll', handleScroll2)
  await getArticle()
})

const judge = (url: string) => {
  return typeof url === 'string' && (url.endsWith('.png') || url.endsWith('.jpg'));
}
const handleScroll2 = () => {
  // function isInViewport(el) {
  //   const rect = el.getBoundingClientRect();
  //   return (
  //       rect.top >= 0 &&
  //       rect.left >= 0 &&
  //       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  //       rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  //   );
  // }
  //判断滚动条的相对位置
  function getScrollPosition(): number {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    // 计算滚动条的相对位置
    return scrollTop / (scrollHeight - clientHeight);
  }

  let dom: any = document.querySelector('.content_right')
  if (getScrollPosition() > 0.3) {
    dom.style.position = 'fixed'
  } else {
    dom.style.position = 'relative'
  }
}
type Comment = {
  comment_id: number,
  comment_content: string,
  comment_author_username: string,
  comment_likes: number,
  comment_published_at: string,
  children: Comment[]
}
type Article = {
  article_id: number,
  article_title: string,
  article_content: string,
  article_image_url: string,
  article_likes: number,
  article_published_at: string,
  article_ip_address: string,
  comments: Comment[]
}
const isActive = ref(false)
const articles = ref<Article[]>([])
const getArticle = async () => {
  let res: any = await GetAllArticleSync()
  articles.value = res.data
  console.log(articles.value);

  articles.value = res.data

}
const user = reactive({
  username: window.localStorage.getItem('username'),
  email: window.localStorage.getItem('email'),
  content: ""
})
const sendComment = async (item: any, comment: Comment = undefined, isParent: boolean = false) => {
  if (!user.username || !user.email) {
    ElMessage.error("请输入称呼和邮箱")
  } else {
    let userdata = {
      username: user.username,
      email: user.email,
      password: "123456",
    }
    if (!window.localStorage.getItem("id")) {
      let res: any = await addOrUpdateUser(userdata)
      if (res.code == 200) {
        window.localStorage.setItem("id", res.userId)
        window.localStorage.setItem("username", user.username)
        window.localStorage.setItem("email", user.email)
      }
    } else {
      let comment_data: any = {}
      if (isParent) {
        comment_data = {
          articleId: item.article_id,
          content: user.content,
          authorId: window.localStorage.getItem("id"),
          parentCommentId: comment.comment_id
        }
      } else {
        comment_data = {
          articleId: item.article_id,
          content: user.content,
          authorId: window.localStorage.getItem("id"),
        }
      }
      let res2: any = await addComments(comment_data)
      if (res2.code == 200) {
        ElMessage.success("评论成功")
        user.content = ""
        if (isParent) {
          let commentDom: any = document.querySelector(`.comment-${comment.comment_id}`)
          commentDom.style.display = "none"
        } else {
          let articleDom: any = document.querySelector(`.comment-${item.article_id}`)
          articleDom.style.display = "none"
        }
        await getArticle()
      }
    }

  }

}
const comment = (item: Article) => {
  const { article_id } = item;
  const dom = `.comment-${article_id}`
  if (document.querySelector(dom).style.display == "block")
    document.querySelector(dom).style.display = "none"
  else {
    document.querySelector(dom).style.display = "block"
  }
}
const predom = ref("")
const comment1 = (comment: Comment) => {
  const { comment_id } = comment;
  const dom = `.comment-${comment_id}`

  if (document.querySelector(dom).style.display == "block")
    document.querySelector(dom).style.display = "none"
  else {
    if (predom.value) document.querySelector(predom.value).style.display = "none"
    document.querySelector(dom).style.display = "block"
  }
  predom.value = dom
}

//预览单张图片
const showImg = (img: string) => {
  let imgArr = [];

  imgArr.push(img);

  return imgArr;
}
const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  isActive.value = scrollTop > 733;
}
const handleComment = (item: Comment, id: number) => {
  const { articleId } = item;
}

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>
<style scoped lang="scss">
.container {
  height: 60vh;
  position: relative;
  background: #fff;
  background-image: url("https://cdn.xuxiao888.com/back/chat-CvzvYPdv.jpeg");
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;

  .header {
    //粘性定位
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
  }

  .active {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 3px 0 rgb(0 34 77 / 10%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .body {
    height: 93%;
    color: #fff;
    position: relative;
    z-index: 9;
    text-align: center;
    letter-spacing: 1.2px;
    //margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    h1 {
      font-size: 30px;
      font-weight: 900;
      margin-bottom: 20px;
    }

    p {
      font-size: 20px;
      opacity: .8;
      margin-top: 16px;

    }
  }

  .body-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    min-height: 90vh;
    //background: radial-gradient(ellipse, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 700%);
    background-image: linear-gradient(90deg, rgba(60, 10, 30, .05) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .05) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;

    .content {
      width: 85%;
      //background-color: #ffffff;
      border-radius: 16px;
      margin-top: -70px;
      position: relative;
      color: rgba(60, 60, 67);
      ;
      padding: 10px 40px;
      z-index: 9;
      display: flex;
      flex-direction: row;
      justify-content: center;

      .content_left {
        width: 65%;
        background-color: #ffffff;
        background-image: linear-gradient(90deg, rgba(60, 10, 30, .05) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .05) 3%, transparent 0);
        background-size: 20px 20px;
        background-position: 50%;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .07);
        padding: 10px 10px 10px 20px;

        .item {
          background-color: #ffffff;
          border-radius: 20px;
          padding: 5px;
        }

        .user-info {
          font-size: 14px;
          color: #555;
          display: flex;
          margin-bottom: 20px;

          .img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }

          .username {
            font-size: 15px;
            font-weight: 600;
            color: #607199;
          }
        }

        .content1 {
          p {
            text-indent: 2rem;
            font-size: 16px;
            color: #333;
            white-space: pre-wrap;
            margin-bottom: 10px;
            line-height: 25px;
          }

          .img {
            margin: 10px 0 0 33px;
            width: 400px;
          }
        }

        .content1_bottom {
          margin-top: 15px;
          display: flex;
          justify-content: space-between;

          .ip {
            font-size: 14px;
            color: #607199;
            background: #f7f7f7;
            padding: 5px 13px;
            line-height: 20px;
          }

          .right {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f7f7f7;
            padding: 5px 13px;
            border-radius: 3px;


            .like {
              display: flex;
              justify-content: center;
              align-items: center;

              &:hover {
                cursor: pointer;
              }

              .num {
                margin-left: 5px;
              }
            }

            .aa {
              margin-left: 15px;

              &:hover {
                cursor: pointer;
              }
            }
          }
        }

        .comments {
          margin-top: 10px;
          font-size: 17px;
          line-height: 24px;
          background-color: #f7f7f7;
          //padding: 7px;

          .comments_item {
            display: flex;
            justify-content: space-between;
            margin: 6px 0 6px 0;
            overflow: hidden;
            animation: show ease-in-out 1s;

            @keyframes show {
              from {
                opacity: 0;
                transform: translateY(100px) scale(1.1);
              }

              to {
                opacity: 1;
                transform: translateY(0) scale(1);
              }
            }

            .right {
              font-size: 14px;
              display: flex;
              padding: 2px 7px;
              justify-content: center;
              align-content: center;
              height: 100%;
              border-radius: 3px;

              .like {
                display: none;
                justify-content: center;
                align-items: center;

                &:hover {
                  cursor: pointer;
                }

                .num {
                  margin-left: 5px;
                }
              }

              .aa {
                margin-left: 15px;

                &:hover {
                  cursor: pointer;
                }
              }


            }

            &:hover {
              cursor: pointer;
              background-color: rgba(0, 0, 0, .05);
            }

            .user {
              font-weight: bold;
              color: #607199;
            }

            .con {
              margin-left: 10px;
              color: #333;
              white-space: pre-wrap;
            }
          }


        }
      }

      .content_right {
        margin-left: 10px;
        width: 26%;
        height: 320px;
        background-color: #ffffff;
        text-align: center;
        border-radius: 6px;
        position: sticky;
        top: 80px;
        //position: relative;
        padding-top: 1px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .07);

        .bg {
          width: 100%;
          height: 110px;
          background-image: url("https://cdn.xuxiao888.com/back/f4360ba454d24fa0805d55417808f567-B7YFa2uc.jpg");
          background-position: 50%;
          background-size: cover;
          background-repeat: no-repeat;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 6px;


          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 50%;
            bottom: 0;
            left: 0;
            background: linear-gradient(transparent, #fff);
          }
        }


        .head {
          width: 60px;
          height: 60px;
          margin: auto;
          background: #f5f5f5;
          border-radius: 50%;
          overflow: hidden;
          margin-top: 80px;
          position: relative;
          z-index: 9;
          border: 2px solid #fff;
        }

        .name {
          font-weight: 600;
          padding: 20px 0 10px;
        }

        .personality {
          color: #999;
          font-size: 14px;
          letter-spacing: 1.2px;
        }

        .concat {
          padding: 20px 0 15px;
          border-top: 1px solid #f5f5f5;
          margin-top: 20px;
          display: flex;
          justify-content: center;

          .svg {
            margin: 0 10px;
          }
        }
      }

    }
  }
}
</style>


<style scoped lang="scss">
.user_comment {
  display: none;
  margin-top: 10px;

  .inner-row {
    display: flex;

    align-items: center;
  }

  .inner-row-con {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>